@model OrchardCore.Commerce.Settings.NumericProductAttributeFieldSettings
@using System.Globalization

@{
    var step = Math.Pow(10, 0 - Model.DecimalPlaces);
    var stepAttribute = step.ToString(CultureInfo.InvariantCulture);
    string minimum = (Model.Minimum.HasValue) ? Math.Round(Model.Minimum.Value, Model.DecimalPlaces).ToString(CultureInfo.InvariantCulture) : "";
    string maximum = (Model.Maximum.HasValue) ? Math.Round(Model.Maximum.Value, Model.DecimalPlaces).ToString(CultureInfo.InvariantCulture) : "";
}

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input asp-for="Required" type="checkbox" class="custom-control-input">
        <label class="custom-control-label" asp-for="Required">@T["Required"]</label>
        <span class="hint">@T["— Whether a value is required."]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-md">
        <label asp-for="Hint">@T["Hint"]</label>
        <textarea asp-for="Hint" rows="2" class="form-control"></textarea>
        <span class="hint">@T["The hint text to display for this attribute in the product page."]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-md">
        <label for="Placeholder">@T["Watermark (placeholder)"]</label>
        <input asp-for="Placeholder" type="text" class="form-control" />
        <span class="hint">@T["A hint to display when the input is empty. (optional)"]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-sm">
        <label for="DecimalPlaces">@T["Decimal places"]</label>
        <input asp-for="DecimalPlaces" class="form-control affects-numeric-product-attr-default" min="0" max="5" step="1" type="number"
               data-related-node="@Html.IdFor(m => m.DefaultValue)" />
        <span class="hint">@T["The number of digits after the decimal point."]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-sm">
        <label for="Minimum">@T["Minimum"]</label>
        <input asp-for="Minimum" class="form-control affects-numeric-product-attr-default"
               data-related-node="@Html.IdFor(m => m.DefaultValue)" />
        <span class="hint">@T["The minimum value allowed. (optional)"]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-sm">
        <label for="Maximum">@T["Maximum"]</label>
        <input asp-for="Maximum" class="form-control affects-numeric-product-attr-default"
               data-related-node="@Html.IdFor(m => m.DefaultValue)" />
        <span class="hint">@T["The maximum value allowed. (optional)"]</span>
    </div>
</div>

<div class="form-group">
    <div class="row col-sm">
        <label for="DefaultValue">@T["Default value"]</label>
        <input asp-for="DefaultValue" class="form-control" min="@minimum" max="@maximum" step="@stepAttribute" type="number"
               data-related-min="@Html.IdFor(m => m.Minimum)" data-related-max="@Html.IdFor(m => m.Maximum)"
               data-related-decimal-places="@Html.IdFor(m => m.DecimalPlaces)"/>
        <span class="hint">@T["The default value. (optional)"]</span>
    </div>
</div>

<script at="Foot">
    $(function () {
        $('.affects-numeric-product-attr-default').on('change', function (e) {
            var defaultValueField = $('#' + $(e.target).data('related-node'));
            var decimalPlaces = $('#' + defaultValueField.data('related-decimal-places')).val() || 0;
            var step = Math.pow(10, 0 - decimalPlaces);
            if (!isNaN(step)) defaultValueField.attr('step', step);
            var min = Math.round(parseFloat($('#' + defaultValueField.data('related-min')).val()) / step) * step;
            if (!isNaN(min)) defaultValueField.attr("min", min);
            var max = Math.round(parseFloat($('#' + defaultValueField.data('related-max')).val()) / step) * step;
            if (!isNaN(max)) defaultValueField.attr("max", max);
        });
    });
</script>